﻿@using System.Net.Http.Json
@using MudBlazor.Examples.Data.Models
@using System.Threading
@namespace MudBlazor.Docs.Examples
@inject HttpClient httpClient

<MudGrid>
    <MudItem xs="12" sm="6" md="4">
        <MudAutocomplete T="Element" Label="Periodic Table Element" @bind-Value="value1"
                         SearchFunc="@Search" ToStringFunc="@(e=> e==null?null : $"{e.Name} ({e.Sign})")">
            <MoreItemsTemplate>
                <MudText Align="Align.Center" Class="px-4 py-1">
                    Only the first 10 items are shown
                </MudText>
            </MoreItemsTemplate>
        </MudAutocomplete>
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudAutocomplete T="Element" Label="Periodic Table Element" @bind-Value="value2"
                         SearchFunc="@SearchEmpty" ToStringFunc="@(e=> e==null?null : $"{e.Name} ({e.Sign})")">
            <NoItemsTemplate>
                <MudText Align="Align.Center" Class="px-4 py-1">
                    No items found
                </MudText>
            </NoItemsTemplate>
        </MudAutocomplete>
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudAutocomplete T="Element" Label="Periodic Table Element" @bind-Value="value3"
                         SearchFunc="@Search" ToStringFunc="@(e=> e==null?null : $"{e.Name} ({e.Sign})")">
            <BeforeItemsTemplate>
                <MudText Color="Color.Primary" Class="px-4 py-1">Always Shows Before List</MudText>
            </BeforeItemsTemplate>
        </MudAutocomplete>
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudAutocomplete T="Element" Label="Periodic Table Element" @bind-Value="value4"
                         SearchFunc="@Search" ToStringFunc="@(e=> e==null?null : $"{e.Name} ({e.Sign})")">
            <AfterItemsTemplate>
                <div class="pa-2">
                    <MudButton Color="Color.Primary">Add item (does nothing)</MudButton>
                </div>
            </AfterItemsTemplate>
        </MudAutocomplete>
    </MudItem>
</MudGrid>

@code {
    private Element value1, value2, value3, value4;

    private async Task<IEnumerable<Element>> Search(string value, CancellationToken token)
    {
        return await httpClient.GetFromJsonAsync<List<Element>>($"webapi/periodictable/{value}", token);
    }

    private async Task<IEnumerable<Element>> SearchEmpty(string value, CancellationToken token)
    {
        await Task.Delay(5, token);
        return Array.Empty<Element>();
    }
}
